<!DOCTYPE html>
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Creative Button Styles </title>
		<meta name="description" content="Creative Button Styles  - Modern and subtle styles &amp; effects for buttons">
		<meta name="keywords" content="button styles, css3, modern, flat button, subtle, effects, hover, web design">
		<link rel="stylesheet" type="text/css" href="./css/default.css">
		<link rel="stylesheet" type="text/css" href="./css/component.css">
		<script src="../modernizr.custom.js"></script>

</head>
	<body>
		<div class="container">
			<header>
				<h1>Creative Button Styles <span>Modern and subtle styles &amp; effects for buttons (hover and click)</span></h1>
			</header>
			<section class="color-1">
				<p class="text note-touch">Note that on mobile devices the effects might not all work as intended.</p>
				<p>
					<button class="btn btn-1 btn-1a">Button</button>
					<button class="btn btn-1 btn-1b">Button</button>
					<button class="btn btn-1 btn-1c">Button</button>
				</p>
				<p>
					<button class="btn btn-1 btn-1d">Button</button>
					<button class="btn btn-1 btn-1e">Button</button>
					<button class="btn btn-1 btn-1f">Button</button>
				</p>
			</section>
			<section class="color-2">
				<p>
					<button class="btn btn-2 btn-2a">Button</button>
					<button class="btn btn-2 btn-2b">Button</button>
				</p>
				<p>
					<button class="btn btn-2 btn-2c">Button</button>
					<button class="btn btn-2 btn-2d">Button</button>
				</p>
				<p>
					<button class="btn btn-2 btn-2e">Button</button>
					<button class="btn btn-2 btn-2f">Button</button>
				</p>
				<p>
					<button class="btn btn-2 btn-2g">Button</button>
					<button class="btn btn-2 btn-2h">Button</button>
				</p>
				<p>
					<button class="btn btn-2 btn-2i">Yes</button>
					<button class="btn btn-2 btn-2j">No</button>
				</p>
			</section>
			<section class="color-3">
				<p>
					<button class="btn btn-3 btn-3a icon-cart">Add to cart</button>
					<button class="btn btn-3 btn-3b icon-star-2">Bookmark</button>
				</p>
				<p>
					<button class="btn btn-3 btn-3c icon-heart-2">Favorite</button>
				</p>
				<p>
					<button class="btn btn-3 btn-3d icon-cog">Settings</button>
					<button class="btn btn-3 btn-3e icon-arrow-right">Send data</button>
				</p>
			</section>
			<section class="color-4">
				<p>
					<button class="btn btn-4 btn-4a icon-arrow-right">Continue</button>
					<button class="btn btn-4 btn-4b icon-arrow-left">Return</button>
				</p>
				<p>
					<button class="btn btn-4 btn-4c icon-arrow-right">Continue</button>
					<button class="btn btn-4 btn-4d icon-arrow-left">Return</button>
				</p>
			</section>
			<section class="color-5">
				<p>
					<button class="btn btn-5 btn-5a icon-cart"><span>Add to cart</span></button>
					<button class="btn btn-5 btn-5a icon-remove"><span>Delete</span></button>
					<button class="btn btn-5 btn-5a icon-cog"><span>Settings</span></button>
				</p>
				<p>
					<button class="btn btn-5 btn-5b icon-cart"><span>Add to cart</span></button>
					<button class="btn btn-5 btn-5b icon-remove"><span>Delete</span></button>
					<button class="btn btn-5 btn-5b icon-cog"><span>Settings</span></button>
				</p>
			</section>
			<section class="color-6">
				<p>
					<button class="btn btn-6 btn-6a">Button</button>
					<button class="btn btn-6 btn-6b">Button</button>
					<button class="btn btn-6 btn-6c">Button</button>
				</p>
				<p>
					<button class="btn btn-6 btn-6d">Button</button>
					<button class="btn btn-6 btn-6e">Button</button>
					<button class="btn btn-6 btn-6f">Button</button>
				</p>
				<p>
					<button class="btn btn-6 btn-6g">Button</button>
					<button class="btn btn-6 btn-6h">Button</button>
					<button class="btn btn-6 btn-6i">Button</button>
				</p>
				<p>
					<button class="btn btn-6 btn-6j">Button</button>
					<button class="btn btn-6 btn-6k">Button</button>
					<button class="btn btn-6 btn-6l">Button</button>
				</p>
			</section>
			<section class="color-7" id="btn-click">
				<p class="text">Click on the buttons to see the effect</p>
				<p>
					<button class="btn btn-7 btn-7a icon-truck">Order item</button>
					<button class="btn btn-7 btn-7b icon-envelope">Send message</button>
				</p>
				<p>
					<button class="btn btn-7 btn-7c btn-icon-only icon-arrow-right">Submit</button>
					<button class="btn btn-7 btn-7d btn-icon-only icon-remove">Empty</button>
				</p>
				<p>
					<button class="btn btn-7 btn-7e btn-icon-only icon-heart">Like</button>
					<button class="btn btn-7 btn-7f btn-icon-only icon-star">Fav</button>
					<button class="btn btn-7 btn-7g btn-icon-only icon-plus">Add</button>
				</p>
				<p>
					<button class="btn btn-7 btn-7h icon-envelope">Submit form</button>
					<button class="btn btn-7 btn-7h icon-envelope">Submit form</button>
				</p>
				<div id="trash-effect" class="trash-effect">
					<button class="btn btn-7 btn-7i btn-icon-only icon-remove-2">Remove</button>
					<div class="icon-file"></div>
					<div class="icon-file"></div>
					<div class="icon-file"></div>
				</div>
			</section>
			<section class="color-8">
				<p class="perspective">
					<button class="btn btn-8 btn-8a">3D Button</button>
				</p>
				<p class="perspective">
					<button class="btn btn-8 btn-8b">3D Button</button>
				</p>
				<br>
				<p class="perspective">
					<button class="btn btn-8 btn-8c">3D Button</button>
				</p>
				<p class="perspective">
					<button class="btn btn-8 btn-8d">3D Button</button>
				</p>
				<p class="text">Click the following buttons to see the effect:</p>
				<p class="perspective">
					<button class="btn btn-8 btn-8e">3D Button</button>
				</p>
				<p class="perspective">
					<button class="btn btn-8 btn-8f">3D Button</button>
				</p>
				<br>
				<p class="perspective">
					<button class="btn btn-8 btn-8g">3D Button</button>
				</p>
				<p class="perspective">
					<button class="btn btn-8 btn-8g">3D Button</button>
				</p>
			</section>
			<section class="color-1 info">
				<p>If you enjoyed this you might also like:</p>
				<p><a href="./ProgressButtonStyles/">Progress Button Styles</a></p>
				<p><a href="./CreativeLinkEffects/">Creative Link Effects</a></p>
				<p><a href="./IconHoverEffects/">Simple Icon Hover Effects</a></p>
			</section>
		</div><!-- /container -->
		<script src="./classie.js"></script>
		<script>
			var buttons7Click = Array.prototype.slice.call( document.querySelectorAll( '#btn-click button' ) ),
				buttons9Click = Array.prototype.slice.call( document.querySelectorAll( 'button.btn-8g' ) ),
				totalButtons7Click = buttons7Click.length,
				totalButtons9Click = buttons9Click.length;

			buttons7Click.forEach( function( el, i ) { el.addEventListener( 'click', activate, false ); } );
			buttons9Click.forEach( function( el, i ) { el.addEventListener( 'click', activate, false ); } );

			function activate() {
				var self = this, activatedClass = 'btn-activated';

				if( classie.has( this, 'btn-7h' ) ) {
					// if it is the first of the two btn-7h then activatedClass = 'btn-error';
					// if it is the second then activatedClass = 'btn-success'
					activatedClass = buttons7Click.indexOf( this ) === totalButtons7Click-2 ? 'btn-error' : 'btn-success';
				}
				else if( classie.has( this, 'btn-8g' ) ) {
					// if it is the first of the two btn-8g then activatedClass = 'btn-success3d';
					// if it is the second then activatedClass = 'btn-error3d'
					activatedClass = buttons9Click.indexOf( this ) === totalButtons9Click-2 ? 'btn-success3d' : 'btn-error3d';
				}

				if( !classie.has( this, activatedClass ) ) {
					classie.add( this, activatedClass );
					setTimeout( function() { classie.remove( self, activatedClass ) }, 1000 );
				}
			}

			document.querySelector( '.btn-7i' ).addEventListener( 'click', function() {
				classie.add( document.querySelector( '#trash-effect' ), 'trash-effect-active' );
			}, false );
		</script>

</body></html>
